<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
  <meta name="generator" content="made with love by dartdoc 0.28.4">
  <meta name="description" content="pin_code_fields API docs, for the Dart programming language.">
  <title>pin_code_fields - Dart API docs</title>

  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500,400i,400,300|Source+Sans+Pro:400,300,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="static-assets/github.css">
  <link rel="stylesheet" href="static-assets/styles.css">
  <link rel="icon" href="static-assets/favicon.png">
  
</head>

<body>

<div id="overlay-under-drawer"></div>

<header id="title">
  <button id="sidenav-left-toggle" type="button">&nbsp;</button>
  <ol class="breadcrumbs gt-separated dark hidden-xs">
    <li><a href="https://github.com/adar2378">pin_code_fields package</a></li>
  </ol>
  <div class="self-name">pin_code_fields</div>
  <form class="search navbar-right" role="search">
    <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
  </form>
</header>

<main>

  <div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
    <header id="header-search-sidebar" class="hidden-l">
      <form class="search-sidebar" role="search">
        <input type="text" id="search-sidebar" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
      </form>
    </header>
    
    <ol class="breadcrumbs gt-separated dark hidden-l" id="sidebar-nav">
      <li><a href="https://github.com/adar2378">pin_code_fields package</a></li>
    </ol>
    
    <h5 class="hidden-xs"><span class="package-name">pin_code_fields</span> <span class="package-kind">package</span></h5>
    <ol>
          <li class="section-title">Libraries</li>
          <li><a href="pin_code_fields/pin_code_fields-library.html">pin_code_fields</a></li>
          <li class="section-title">Dart</li>
          <li><a href="dart-ui/dart-ui-library.html">dart:ui</a></li>
          <li class="section-subtitle">Core</li>
            <li class="section-subitem"><a href="dart-async/dart-async-library.html">dart:async</a></li>
            <li class="section-subitem"><a href="dart-collection/dart-collection-library.html">dart:collection</a></li>
            <li class="section-subitem"><a href="dart-convert/dart-convert-library.html">dart:convert</a></li>
            <li class="section-subitem"><a href="dart-core/dart-core-library.html">dart:core</a></li>
            <li class="section-subitem"><a href="dart-developer/dart-developer-library.html">dart:developer</a></li>
            <li class="section-subitem"><a href="dart-math/dart-math-library.html">dart:math</a></li>
            <li class="section-subitem"><a href="dart-typed_data/dart-typed_data-library.html">dart:typed_data</a></li>
          <li class="section-subtitle">VM</li>
            <li class="section-subitem"><a href="dart-io/dart-io-library.html">dart:io</a></li>
            <li class="section-subitem"><a href="dart-isolate/dart-isolate-library.html">dart:isolate</a></li>
    </ol>
  </div>

  <div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
      <section class="desc markdown">
        <h1 id="pin_code_fields">pin_code_fields</h1>
<p><a href="https://pub.dev/packages/pin_code_fields"><img src="https://img.shields.io/pub/v/pin_code_fields"></a></p>
<p><a href="https://www.patreon.com/bePatron?u=26622525"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="250"></a></p>
<p>A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs 🤓🤓</p>
<h2 id="features-">Features 💚</h2><ul><li>Automatically focuses the next field on typing and focuses previous field on deletation</li><li>Can be set to any length. (3-6 fields recommended)</li><li>3 different shapes for text fields</li><li>Highly customizable</li><li>3 different types of animation for input texts</li><li>Animated active, inactive, selected and disabled field color switching</li><li>Autofocus option</li><li>Otp-code pasting from clipboard</li><li>iOS autofill support</li><li>Get currently typed text and use your condition to validate it. (for example: if (currentText.length != 6 || currentText != "your desired code"))</li></ul>
<h2 id="properties-">Properties 🔖</h2>
<pre class="language-Dart"><code class="language-Dart">/// length of how many cells there should be. 3-8 is recommended by me
  final int length;

  /// you already know what it does i guess :P default is false
  final bool obsecureText;

  /// returns the current typed text in the fields
  final ValueChanged&lt;String&gt; onChanged;

  /// returns the typed text when all pins are set
  final ValueChanged&lt;String&gt; onCompleted;

  /// this defines the shape of the input fields. Default is underlined
  final PinCodeFieldShape shape;

  /// the style of the text, default is [ fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold]
  final TextStyle textStyle;

  /// background color for the whole row of pin code fields. Default is [Colors.white]
  final Color backgroundColor;

  /// Border radius of each pin code field
  final BorderRadius borderRadius;

  /// [height] for the pin code field. default is [50.0]
  final double fieldHeight;

  /// [width] for the pin code field. default is [40.0]
  final double fieldWidth;

  /// This defines how the elements in the pin code field align. Default to [MainAxisAlignment.spaceBetween]
  final MainAxisAlignment mainAxisAlignment;

  /// Colors of the input fields which have inputs. Default is [Colors.green]
  final Color activeColor;

  /// Color of the input field which is currently selected. Default is [Colors.blue]
  final Color selectedColor;

  /// Colors of the input fields which don't have inputs. Default is [Colors.red]
  final Color inactiveColor;

  /// Colors of the input fields if the [PinCodeTextField] is disabled. Default is [Colors.grey]
  final Color disabledColor;

  /// Border width for the each input fields. Default is [2.0]
  final double borderWidth;

  /// [AnimationType] for the text to appear in the pin code field. Default is [AnimationType.slide]
  final AnimationType animationType;

  /// Duration for the animation. Default is [Duration(milliseconds: 150)]
  final Duration animationDuration;

  /// [Curve] for the animation. Default is [Curves.easeInOut]
  final Curve animationCurve;

  /// [TextInputType] for the pin code fields. default is [TextInputType.visiblePassword]
  final TextInputType textInputType;

  /// If the pin code field should be autofocused or not. Default is [false]
  final bool autoFocus;

  /// Should pass a [FocusNode] to manage it from the parent
  final FocusNode focusNode;

  /// A list of [TextInputFormatter] that goes to the TextField
  final List&lt;TextInputFormatter&gt; inputFormatters;

  /// Enable or disable the Field. Default is [true]
  final bool enabled;

  /// title of the [AlertDialog] while pasting the code. Default to [Paste Code]
  final String dialogTitle;

  /// content of the [AlertDialog] while pasting the code. Default to ["Do you want to paste this code "]
  final String dialogContent;

   /// Affirmative action text for the [AlertDialog]. Default to "Paste"
  final String affirmativeText;

  /// Negative action text for the [AlertDialog]. Default to "Cancel"
  final String negavtiveText;
  
  /// [TextEditingController] to control the text manually. Sets a default [TextEditingController()] object if none given
  final TextEditingController controller;
</code></pre>
<h2 id="contributors-">Contributors ✨</h2>
<p>Thanks to everyone whoever suggested their thoughts to improve this package. And special thanks goes to these people:</p><table>
  <tbody><tr>
    <td align="center"><a href="https://github.com/EmmanuelVlad"><img src="https://avatars0.githubusercontent.com/u/21370666?v=3" width="100px;" alt="Emmanuel Vlad"><br><sub><b>Emmanuel Vlad</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields" title="Documentation">📖</a><a href="https://github.com/adar2378/pin_code_fields/commits?author=EmmanuelVlad" title="Code">💻</a></td>
<td align="center"><a href="https://atiq.info/"><img src="https://atiq.info/images/logo.png" width="100px;" alt="Atiq"><br><sub><b>Atiqur Rahaman</b></sub></a><br><a href="https://www.2dimensions.com/a/atiq31416/files/flare/otp-verification/preview" title="UX &amp; Flare Animation">🎨</a></td>
<td align="center"><a href="https://github.com/thallessantos"><img src="https://avatars2.githubusercontent.com/u/13054457?v=3" width="100px;" alt="Thalles Santos"><br><sub><b>Thalles Santos</b></sub></a><br><a href="https://github.com/adar2378/pin_code_fields/commits?author=thallessantos" title="Code">💻</a></td>
  </tr>
</tbody></table>
<h2 id="getting-started-">Getting Started ⚡️</h2>
<h4 id="demo">Demo</h4>
<p><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/pincode_example.gif" width="240" height="480"> <img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_android.gif" width="240" height="480"> <img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/paste_ios.gif" width="240" height="480"></p>
<h4 id="different-shapes">Different Shapes</h4>
<p><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/box.png" width="250" height="480"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/circle.png" width="250" height="480"><img src="https://raw.githubusercontent.com/adar2378/pin_code_fields/master/demo_media/underline.png" width="250" height="480"></p>
<p><strong>The pin code text field widget example</strong></p>
<pre class="language-Dart"><code class="language-Dart">PinCodeTextField(
  length: 6,
  obsecureText: false,
  animationType: AnimationType.fade,
  shape: PinCodeFieldShape.box,
  animationDuration: Duration(milliseconds: 300),
  borderRadius: BorderRadius.circular(5),
  fieldHeight: 50,
  fieldWidth: 40,
  onChanged: (value) {
    setState(() {
      currentText = value;
    });
  },
)
</code></pre>
<p><strong>Shape can be among these 3 types</strong></p>
<pre class="language-Dart"><code class="language-Dart">enum PinCodeFieldShape { box, underline, circle }
</code></pre>
<p><strong>Animations can be among these 3 types</strong></p>
<pre class="language-Dart"><code class="language-Dart">enum AnimationType { scale, slide, fade, none }
</code></pre>
<p><strong>This full code is from the example folder. You can run the example to see.</strong></p>
<pre class="language-Dart"><code class="language-Dart">class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PinCodeVerificationScreen(
          "+8801376221100"), // a random number, please don't call xD
    );
  }
}

class PinCodeVerificationScreen extends StatefulWidget {
  final String phoneNumber;
  PinCodeVerificationScreen(this.phoneNumber);
  @override
  _PinCodeVerificationScreenState createState() =&gt;
      _PinCodeVerificationScreenState();
}

class _PinCodeVerificationScreenState extends State&lt;PinCodeVerificationScreen&gt; {
  var onTapRecognizer;

  /// this [StreamController] will take input of which function should be called

  bool hasError = false;
  String currentText = "";
  final GlobalKey&lt;ScaffoldState&gt; scaffoldKey = GlobalKey&lt;ScaffoldState&gt;();
  @override
  void initState() {
    onTapRecognizer = TapGestureRecognizer()
      ..onTap = () {
        Navigator.pop(context);
      };

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: ListView(
            children: &lt;Widget&gt;[
              SizedBox(height: 30),
              Image.asset(
                'assets/verify.png',
                height: MediaQuery.of(context).size.height / 3,
                fit: BoxFit.fitHeight,
              ),
              SizedBox(height: 8),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Text(
                  'Phone Number Verification',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
                  textAlign: TextAlign.center,
                ),
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 30.0, vertical: 8),
                child: RichText(
                  text: TextSpan(
                      text: "Enter the code sent to ",
                      children: [
                        TextSpan(
                            text: widget.phoneNumber,
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                                fontSize: 15)),
                      ],
                      style: TextStyle(color: Colors.black54, fontSize: 15)),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30),
                  child: PinCodeTextField(
                    length: 6,
                    obsecureText: false,
                    animationType: AnimationType.fade,
                    shape: PinCodeFieldShape.underline,
                    animationDuration: Duration(milliseconds: 300),
                    borderRadius: BorderRadius.circular(5),
                    fieldHeight: 50,
                    fieldWidth: 40,
                    onChanged: (value) {
                      setState(() {
                        currentText = value;
                      });
                    },
                  )),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30.0),
                // error showing widget
                child: Text(
                  hasError ? "*Please fill up all the cells properly" : "",
                  style: TextStyle(color: Colors.red.shade300, fontSize: 15),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              RichText(
                textAlign: TextAlign.center,
                text: TextSpan(
                    text: "Didn't receive the code? ",
                    style: TextStyle(color: Colors.black54, fontSize: 15),
                    children: [
                      TextSpan(
                          text: " RESEND",
                          recognizer: onTapRecognizer,
                          style: TextStyle(
                              color: Color(0xFF91D3B3),
                              fontWeight: FontWeight.bold,
                              fontSize: 16))
                    ]),
              ),
              SizedBox(
                height: 14,
              ),
              Container(
                margin:
                    const EdgeInsets.symmetric(vertical: 16.0, horizontal: 30),
                child: ButtonTheme(
                  height: 50,
                  child: FlatButton(
                    onPressed: () {
                      // conditions for validating
                      if (currentText.length != 6 || currentText != "towtow") {
                        setState(() {
                          hasError = true;
                        });
                      } else {
                        setState(() {
                          hasError = false;
                          scaffoldKey.currentState.showSnackBar(SnackBar(
                            content: Text("Aye!!"),
                            duration: Duration(seconds: 2),
                          ));
                        });
                      }
                    },
                    child: Center(
                        child: Text(
                      "VERIFY".toUpperCase(),
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.bold),
                    )),
                  ),
                ),
                decoration: BoxDecoration(
                    color: Colors.green.shade300,
                    borderRadius: BorderRadius.circular(5),
                    boxShadow: [
                      BoxShadow(
                          color: Colors.green.shade200,
                          offset: Offset(1, -2),
                          blurRadius: 5),
                      BoxShadow(
                          color: Colors.green.shade200,
                          offset: Offset(-1, 2),
                          blurRadius: 5)
                    ]),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
</code></pre>
      </section>
      
        <section class="summary">
            <h2>Libraries</h2>
          <dl>
            <dt id="pin_code_fields">
              <span class="name"><a href="pin_code_fields/pin_code_fields-library.html">pin_code_fields</a></span>             
            </dt>
            <dd>
              
            </dd>          </dl>
        </section>
        <section class="summary">
            <h2>Dart</h2>
          <dl>
            <dt id="dart:ui">
              <span class="name"><a href="dart-ui/dart-ui-library.html">dart:ui</a></span>             
            </dt>
            <dd>
              Built-in types and core primitives for a Flutter application. <a href="dart-ui/dart-ui-library.html">[...]</a>
            </dd>            <h3>Core</h3>
              <dt id="dart:async">
                <span class="name"><a href="dart-async/dart-async-library.html">dart:async</a></span>               
              </dt>
              <dd>
                Support for asynchronous programming,
with classes such as Future and Stream. <a href="dart-async/dart-async-library.html">[...]</a>
              </dd>              <dt id="dart:collection">
                <span class="name"><a href="dart-collection/dart-collection-library.html">dart:collection</a></span>               
              </dt>
              <dd>
                Classes and utilities that supplement the collection support in dart:core. <a href="dart-collection/dart-collection-library.html">[...]</a>
              </dd>              <dt id="dart:convert">
                <span class="name"><a href="dart-convert/dart-convert-library.html">dart:convert</a></span>               
              </dt>
              <dd>
                Encoders and decoders for converting between different data representations,
including JSON and UTF-8. <a href="dart-convert/dart-convert-library.html">[...]</a>
              </dd>              <dt id="dart:core">
                <span class="name"><a href="dart-core/dart-core-library.html">dart:core</a></span>               
              </dt>
              <dd>
                Built-in types, collections,
and other core functionality for every Dart program. <a href="dart-core/dart-core-library.html">[...]</a>
              </dd>              <dt id="dart:developer">
                <span class="name"><a href="dart-developer/dart-developer-library.html">dart:developer</a></span>               
              </dt>
              <dd>
                Interact with developer tools such as the debugger and inspector. <a href="dart-developer/dart-developer-library.html">[...]</a>
              </dd>              <dt id="dart:math">
                <span class="name"><a href="dart-math/dart-math-library.html">dart:math</a></span>               
              </dt>
              <dd>
                Mathematical constants and functions, plus a random number generator. <a href="dart-math/dart-math-library.html">[...]</a>
              </dd>              <dt id="dart:typed_data">
                <span class="name"><a href="dart-typed_data/dart-typed_data-library.html">dart:typed_data</a></span>               
              </dt>
              <dd>
                Lists that efficiently handle fixed sized data
(for example, unsigned 8 byte integers) and SIMD numeric types. <a href="dart-typed_data/dart-typed_data-library.html">[...]</a>
              </dd>            <h3>VM</h3>
              <dt id="dart:io">
                <span class="name"><a href="dart-io/dart-io-library.html">dart:io</a></span>               
              </dt>
              <dd>
                File, socket, HTTP, and other I/O support for non-web applications. <a href="dart-io/dart-io-library.html">[...]</a>
              </dd>              <dt id="dart:isolate">
                <span class="name"><a href="dart-isolate/dart-isolate-library.html">dart:isolate</a></span>               
              </dt>
              <dd>
                Concurrent programming using <em>isolates</em>:
independent workers that are similar to threads
but don't share memory,
communicating only via messages. <a href="dart-isolate/dart-isolate-library.html">[...]</a>
              </dd>          </dl>
        </section>

  </div> <!-- /.main-content -->

  <div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
  </div>

</main>

<footer>
  <span class="no-break">
    pin_code_fields 2.3.0+2
  </span>

  
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="static-assets/typeahead.bundle.min.js"></script>
<script src="static-assets/highlight.pack.js"></script>
<script src="static-assets/URI.js"></script>
<script src="static-assets/script.js"></script>


</body>

</html>
